Angular Material একটি শক্তিশালী এবং প্রভাবশালী UI কম্পোনেন্ট লাইব্রেরি, যা ব্যবহার করে আপনি রেসপন্সিভ এবং আধুনিক ড্যাশবোর্ড তৈরি করতে পারেন। রেসপন্সিভ ড্যাশবোর্ড তৈরি করার জন্য Angular Material এর বিভিন্ন উপাদান যেমন Sidenav, Grid List, Card, Toolbar, Table, এবং Icon ব্যবহার করা যেতে পারে।

এখানে আমরা দেখবো কিভাবে Angular Material ব্যবহার করে একটি রেসপন্সিভ ড্যাশবোর্ড তৈরি করা যায়, যা বিভিন্ন স্ক্রীন সাইজে ভালভাবে প্রদর্শিত হবে।

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, Angular Material এর প্রয়োজনীয় মডিউলগুলো ইমপোর্ট করতে হবে। যেমন MatSidenavModule, MatGridListModule, MatCardModule, MatToolbarModule, MatIconModule, এবং MatButtonModule।

মডিউল ইমপোর্ট:

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    MatSidenavModule,
    MatGridListModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    BrowserAnimationsModule
  ]
})
export class AppModule {}

২. HTML টেমপ্লেট (ড্যাশবোর্ডের কাঠামো)

এখন, একটি রেসপন্সিভ ড্যাশবোর্ডের কাঠামো তৈরি করতে Sidenav, Grid List, Card ইত্যাদি উপাদান ব্যবহার করা হবে।

HTML কোড:

<mat-toolbar color="primary">
  <span>Responsive Dashboard</span>
</mat-toolbar>

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened="true">
    <mat-nav-list>
      <mat-list-item>
        <mat-icon>home</mat-icon> Home
      </mat-list-item>
      <mat-list-item>
        <mat-icon>account_circle</mat-icon> Profile
      </mat-list-item>
      <mat-list-item>
        <mat-icon>settings</mat-icon> Settings
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <div class="content">
      <mat-grid-list cols="3" rowHeight="200px">
        <mat-grid-tile *ngFor="let card of cards">
          <mat-card>
            <mat-card-header>
              <mat-card-title>{{ card.title }}</mat-card-title>
            </mat-card-header>
            <mat-card-content>
              <p>{{ card.content }}</p>
            </mat-card-content>
          </mat-card>
        </mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

এখানে:

• mat-toolbar: ড্যাশবোর্ডের হেডার তৈরি করতে ব্যবহৃত।
• mat-sidenav: এটি সাইডবার (Sidenav) তৈরি করে, যেখানে নেভিগেশন লিঙ্কগুলো থাকে।
• mat-nav-list: এটি একটি লিস্ট তৈরি করে, যা সাইডবারে ব্যবহারকারীর জন্য নেভিগেশন লিঙ্কস বা মেনু আইটেমস প্রর্দশিত করবে।
• mat-grid-list: এটি একটি গ্রিড তৈরি করে, যা ড্যাশবোর্ডে বিভিন্ন উপাদান বা কার্ড (card) প্রদর্শন করবে।
• mat-card: এটি ড্যাশবোর্ডের বিভিন্ন সেকশনে ডেটা প্রদর্শনের জন্য ব্যবহৃত হবে।

৩. স্টাইলিং (CSS)

আমরা চাইলে CSS ব্যবহার করে ড্যাশবোর্ডটিকে আরও সুন্দর এবং রেসপন্সিভ করতে পারি।

CSS (styles.css):

.example-container {
  height: 100%;
}

mat-sidenav {
  width: 250px;
}

.content {
  margin: 20px;
}

mat-grid-list {
  margin-top: 20px;
}

@media (max-width: 600px) {
  mat-sidenav {
    width: 100%;
  }

  mat-grid-list {
    grid-template-columns: 1fr;
  }
}

এখানে:

• mat-sidenav: সাইডবারের আকার এবং স্থিতি কাস্টমাইজ করা হয়েছে।
• @media query: রেসপন্সিভ ডিজাইন তৈরির জন্য, ছোট স্ক্রীন সাইজে সাইডবার এবং গ্রিডের কন্টেন্ট পরিবর্তন করা হয়েছে।

৪. ডেটা এবং টাইপস্ক্রিপ্ট

এখন, টেমপ্লেটের জন্য ডেটা এবং অন্যান্য কনফিগারেশন টাইপস্ক্রিপ্টে সেট করতে হবে। এখানে, একটি কাস্টম কার্ড ডেটা তৈরি করা হয়েছে।

TypeScript (app.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  cards = [
    { title: 'Card 1', content: 'Content for Card 1' },
    { title: 'Card 2', content: 'Content for Card 2' },
    { title: 'Card 3', content: 'Content for Card 3' }
  ];
}

এখানে:

• cards অ্যারে ড্যাশবোর্ডে প্রদর্শিত হবে যেখানে প্রত্যেকটি আইটেম একটি mat-card তৈরি করবে।

৫. রেসপন্সিভ নেভিগেশন এবং সাইডবার

Sidenav এর জন্য রেসপন্সিভ নেভিগেশন কনফিগার করার জন্য আপনি একটি টগল বাটন যোগ করতে পারেন, যা মোবাইল বা ছোট স্ক্রীনে সাইডবারকে খুলতে বা বন্ধ করতে সাহায্য করবে।

HTML কোড (সাইডবার টগল):

<mat-toolbar color="primary">
  <button mat-icon-button (click)="sidenav.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
  <span>Responsive Dashboard</span>
</mat-toolbar>

এখানে, (click)="sidenav.toggle()" ব্যবহার করে আপনি সাইডবারকে টগল করতে পারবেন।

এখন পর্যন্ত আমরা Angular Material ব্যবহার করে একটি রেসপন্সিভ ড্যাশবোর্ড তৈরি করেছি যা সাইডবার, কার্ড, এবং গ্রিড লিস্ট সহ বিভিন্ন উপাদান ব্যবহার করে তৈরি হয়েছে। mat-sidenav, mat-toolbar, mat-grid-list, এবং mat-card এর মাধ্যমে আপনি একটি আধুনিক, সুন্দর এবং রেসপন্সিভ ড্যাশবোর্ড তৈরি করতে পারেন। CSS Media Queries ব্যবহার করে ছোট স্ক্রীন বা মোবাইল ডিভাইসে কনটেন্টের ডিজাইনকে রেসপন্সিভ করা হয়েছে।